<template>
    <div class="header">
       <router-link tag='i' class="iconfont" v-html="icon" to='/home'></router-link>
       <div class="header_title">{{sex}}</div>
       <div class='more' @click="handchange($event)" ref="mybox">操作</div>
    </div>
</template>

<script>
import bus from '../../utils/bus'
export default {
    name:"compontHeader",
    data(){
        return{
            icon:'&#xe6e0;',
            pase:false
        }
    },
    props:{
        sex:{
            type:String,
            required:true
        }
    },
    methods:{
        handchange(){
          this.pase=!this.pase;
          this.pase ? this.$refs.mybox.innerHTML ='完成':  this.$refs.mybox.innerHTML ='操作'
          bus.$emit('sedn',this.pase);
        }
    }
}
</script>

<style scoped>
.header_title{
        font-size: 19px;
    }
    .header{
        font-size: 19px;
        width: 100%;
        height: .5rem;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color:#333;
    }
    i{
        padding-left: .1rem;
    }
    .more{
        padding-right: .1rem;
        font-size: 14px;
        color: #666666;
    }
</style>